<template>
  <div>
    <!-- 入职 -->
    <div>
      
    </div>
    <el-row>
      <el-col :span="22">
        <div class="sec-title">职位管理</div>
      </el-col>
      <el-col :span="2">
        <div>
          <i class="el-icon-plus sec-blue"></i>
          <el-button @click="saveHandle" type="text">新增</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 筛选条件 -->
    <el-form
      :inline="true"
      :model="queryParams"
      class="demo-form-inline"
    >
      <el-form-item label="角色名称">
        <el-input
          v-model="queryParams.roleName"
          placeholder="角色名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="initSearchRoles"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      :data="roles"
      height="590"
    >
      <el-table-column
        prop="roleId"
        label="角色编号"
      >
      </el-table-column>
      <el-table-column
        prop="roleName"
        label="角色名称"
      >
      </el-table-column>
      <el-table-column
        prop="roleDesc"
        label="角色描述"
      >
      </el-table-column>
      <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="editHandle(scope.row)"
          >修改</el-button>
          <el-button
            type="text"
            size="small"
            @click="deleteHandle(scope.row)"
          >删除</el-button>
          <el-button
            type="text"
            size="small"
            @click="grantHandle(scope.row)"
          >授予</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="pageData.total"
      @prev-click="preHandle"
      @next-click="nextHandle"
      @current-change="currentChangeHandle"
    >
    </el-pagination>

    <el-drawer
      :title="isAddRole ? '新增角色' : '修改角色'"
      :visible.sync="changeRoleKey"
      >
      <el-form :model="newRole" label-width="80px">
        <el-form-item v-if="!isAddRole" label="角色编号">
          <el-input disabled v-model="newRole.roleId"></el-input>
        </el-form-item>
        <el-form-item label="角色名称">
          <el-input v-model="newRole.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="newRole.roleDesc"></el-input>
        </el-form-item>
        <el-form-item label="父级角色">
          <el-input v-model="newRole.parentName">
            <el-button @click="showRolesKey = true" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="changeRoleHandle">确定</el-button>
          <el-button @click="changeRoleKey = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <el-dialog
      title="选择父级角色"
      :visible.sync="showRolesKey"
      width="70%">
      <selected-role @selectRole="roleCallback"></selected-role>
    </el-dialog>
    <el-dialog
      title="授权"
      :visible.sync="grantWindowKey"
      width="70%">
      <el-transfer :titles="['全部权限', '角色权限']" v-model="currentAuthorities" :data="allAuthorities"></el-transfer>
      <div style="margin-top: 20px;">
        <el-button type="primary" @click="grantRoleAuthorities">确定</el-button>
        <el-button @click="grantWindowKey = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { queryAuthoritiesNoCond, queryRoles, queryRoleAuthorities, saveRole, deleteRole, editRole, grantToRole } from '@/api/system/system';
import selectedRole from '@/components/SelectedRoles.vue'
export default {
  components: {
    selectedRole
  },
  data() {
    return {
      isAddRole: false,
      changeRoleKey: false,
      grantWindowKey: false,
      showRolesKey: false,
      showAccountKey: false,
      allAuthorities: [],
      currentAuthorities: [],
      roles: [],
      newRole: {
        roleId: '',
        roleName: '',
        roleDesc: '',
        parentId: '',
        parentName: ''
      },
      queryParams: {
          roleName: '',
          current: 0,
          pageSize: 10
      },
      pageData: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      currentRole: {}
    }
  },
  async mounted() {
    this.initSearchRoles()
  },
  computed: {
  },
  methods: {
    async changeRoleHandle() {
      if (this.isAddRole) {
        const {data: saveRes} = await saveRole(this.newRole)
        if (saveRes.code === 200) {
          this.$message.success('新增成功')
        }
        if (saveRes.code === 500) {
          this.$message.error(saveRes.message)
        }
      } else {
        const {data: editRes} = await editRole(this.newRole)
        if (editRes.code === 200) {
          this.$message.success('新增成功')
        }
        if (editRes.code === 500) {
          this.$message.error(editRes.message)
        }
      }
      this.changeRoleKey = false
      this.searchRoles()
    },
    preHandle(current) {
      this.currentChangeHandle(current)
    },
    nextHandle(current) {
      this.currentChangeHandle(current)
    },
    currentChangeHandle(current) {
      this.pageData.current = current
      this.searchRoles()
    },
    saveHandle() {
      this.newRole = {
        roleId: '',
        roleName: '',
        roleDesc: '',
        parentId: '',
        parentName: ''
      }
      this.isAddRole = true
      this.changeRoleKey = true
    },
    editHandle(row) {
        this.newRole = {...row}
        this.roles.forEach(item => {
          if (item.roleId === row.parentId) {
            this.newRole.parentName = item.roleName
          }
        })
        // 查询父级角色
        this.isAddRole = false
        this.changeRoleKey = true
    },
    async grantHandle(row) {
      // 将当前角色授予用户
      this.currentRole = {...row}
      this.grantWindowKey = true
      // 请求当前角色的权限
      const {data: currentAuth} = await queryRoleAuthorities(this.currentRole.roleId)
      if (currentAuth.code === 200) {
        currentAuth.data.authorities.forEach(item => {
          this.currentAuthorities.push(item.authorityId)
        })
      }
      // 请求所有权限
      const {data: allAuth} = await queryAuthoritiesNoCond()
      if (allAuth.code === 200) {
        allAuth.data.authorities.forEach(item => {
          this.allAuthorities.push({
              key: item.authorityId,
              label: item.authorityName
          })
        })
      }
    },
    deleteHandle(row) {
      let _this = this
      this.$alert('删除角色', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.deleteRoleHandle(row)
        }).catch(() => {
          _this.$message.success('已取消')
        })
        
      
    },
    async deleteRoleHandle(row) {
      const {data: res} = await deleteRole(row.roleId)
      if (res.code === 200) {
        this.$message.success("删除成功")
      }
      if (res.code === 500) {
        this.$message.error(res.message)
      }
      this.searchRoles()
    },
    initSearchRoles() {
      this.pageData.current = 1
      this.pageData.pageSize = 10
      this.searchRoles()
    },
    async searchRoles() {
      this.queryParams.current = this.pageData.current
      this.queryParams.pageSize = this.pageData.pageSize
      const {data: res} = await queryRoles(this.queryParams)
      if (res.code === 200) {
        this.roles = res.data.roles.records
        this.pageData.total = res.data.roles.total
      }
    },
    roleCallback(row) {
      this.newRole.parentId = row.roleId
      this.newRole.parentName = row.roleName
      this.showRolesKey = false
    },
    async grantRoleAuthorities() {
      let grant = {}
      grant.relationId = this.currentRole.roleId
      grant.relations = this.currentAuthorities
      const {data: res} = await grantToRole(grant)
      if (res.code === 200) {
        this.$message.success('授权成功')
      }
      if (res.code === 500) {
        this.$message.error(res.message)
      }
      this.grantWindowKey = false
    }
  },
};
</script>

<style lang="css" scoped>
.sec-blue {
  color: #409eff;
}
.sec-title {
  font-size: 18px;
  font-weight: 700;
}
</style>